<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <style>
        /* 编辑区域默认不可见 */
        #edit-area {
            display: none;
        }
    </style>
<!--    <link href="/graduateinfo/media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>-->
<!--    <link href="/graduateinfo/media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>-->
<!--    <link href="/graduateinfo/media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>-->
<!--    <link href="/graduateinfo/media/css/style-metro.css" rel="stylesheet" type="text/css"/>-->
<!--    <link href="/graduateinfo/media/css/style.css" rel="stylesheet" type="text/css"/>-->
<!--    <link href="/graduateinfo/media/css/style-responsive.css" rel="stylesheet" type="text/css"/>-->
<!--    <link href="/graduateinfo/media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>-->
<!--    <link href="/graduateinfo/media/css/uniform.default.css" rel="stylesheet" type="text/css"/>-->
<!--    <link rel="stylesheet" type="text/css" href="/graduateinfo/media/css/select2_metro.css" />-->
</head>
<body>
<h1>个人信息</h1>
<!-- 预览区域 -->


<div id="preview-area">
    <p>姓名：张三</p>
    <p>性别：男</p>
    <p>身份证号：11010120000101001X</p>
    <p>民族：汉族</p>
    <p>生源地所属身份：北京市</p>
    <p>城市：北京市</p>
    <p>入学学年：2019</p>
    <p>毕业学年：2023</p>
    <p>毕业学院：计算机科学与技术学院</p>
    <p>毕业专业：计算机科学与技术</p>
    <p>学号：202101010001</p>
    <p>毕业学历：本科</p>
    <p>联系方式：13900000000</p>
    <p>家庭住址：北京市海淀区</p>
    <!-- 编辑按钮 -->
    <button id="edit-button">编辑</button>
</div>
<!-- 编辑区域 -->
<div id="edit-area">
    <p>姓名：<input type="text" id="name-input" value="张三"></p>
    <p>性别：<input type="radio" name="gender" value="男" checked>男 <input type="radio" name="gender" value="女">女</p>
    <p>身份证号：<input type="text" id="id-input" value="11010120000101001X"></p>
    <p>民族：<input type="text" id="nation-input" value="汉族"></p>
    <p>生源地所属身份：<input type="text" id="province-input" value="北京市"></p>
    <p>城市：<input type="text" id="city-input" value="北京市"></p>
    <p>入学学年：<input type="text" id="start-year-input" value="2019"></p>
    <p>毕业学年：<input type="text" id="end-year-input" value="2023"></p>
    <p>毕业学院：
        <select id="college-select">
            <option value="">请选择</option>
            <option value="计算机科学与技术学院" selected>计算机科学与技术学院
            <option value="信息工程学院">信息工程学院</option>
            <option value="电子信息工程学院">电子信息工程学院</option>
        </select>
    </p>
    <p>毕业专业：
        <select id="major-select">
            <option value="">请选择</option>
            <option value="计算机科学与技术" selected>计算机科学与技术</option>
            <option value="软件工程">软件工程</option>
            <option value="信息安全">信息安全</option>
            <option value="人工智能">人工智能</option>
        </select>
    </p>
    <p>学号：<input type="text" id="student-id-input" value="202101010001"></p>
    <p>毕业学历：<input type="text" id="degree-input" value="本科"></p>
    <p>联系方式：<input type="text" id="contact-input" value="13900000000"></p>
    <p>家庭住址：<input type="text" id="address-input" value="北京市海淀区"></p>
    <!-- 保存按钮 -->
    <button id="save-button">保存</button>
</div>
<script>
    // 获取元素
    const previewArea = document.getElementById('preview-area');
    const editArea = document.getElementById('edit-area');
    const editButton = document.getElementById('edit-button');
    const saveButton = document.getElementById('save-button');
    const nameInput = document.getElementById('name-input');
    const idInput = document.getElementById('id-input');
    const nationInput = document.getElementById('nation-input');
    const provinceInput = document.getElementById('province-input');
    const cityInput = document.getElementById('city-input');
    const startYearInput = document.getElementById('start-year-input');
    const endYearInput = document.getElementById('end-year-input');
    const collegeSelect = document.getElementById('college-select');
    const majorSelect = document.getElementById('major-select');
    const studentIdInput = document.getElementById('student-id-input');
    const degreeInput = document.getElementById('degree-input');
    const contactInput = document.getElementById('contact-input');
    const addressInput = document.getElementById('address-input');

    // 编辑按钮点击事件
    editButton.addEventListener('click', function() {
        // 隐藏预览区域，显示编辑区域
        previewArea.style.display = 'none';
        editArea.style.display = 'block';

        // 将预览区域的值赋给编辑区域的输入框
        nameInput.value = previewArea.querySelector('p:nth-child(1)').textContent.split('：')[1];
        const gender = previewArea.querySelector('p:nth-child(2)').textContent.split('：')[1];
        if (gender === '男') {
            document.querySelector('input[name=gender][value=男]').checked = true;
        } else {
            document.querySelector('input[name=gender][value=女]').checked = true;
        }
        idInput.value = previewArea.querySelector('p:nth-child(3)').textContent.split('：')[1];
        nationInput.value = previewArea.querySelector('p:nth-child(4)').textContent.split('：')[1];
        provinceInput.value = previewArea.querySelector('p:nth-child(5)').textContent.split('：')[1];
        cityInput.value = previewArea.querySelector('p:nth-child(6)').textContent.split('：')[1];
        value = previewArea.querySelector('p:nth-child(7)').textContent.split('：')[1];
        endYearInput.value = previewArea.querySelector('p:nth-child(8)').textContent.split('：')[1];
        collegeSelect.value = previewArea.querySelector('p:nth-child(9)').textContent.split('：')[1];
        majorSelect.value = previewArea.querySelector('p:nth-child(10)').textContent.split('：')[1];
        studentIdInput.value = previewArea.querySelector('p:nth-child(11)').textContent.split('：')[1];
        degreeInput.value = previewArea.querySelector('p:nth-child(12)').textContent.split('：')[1];
        contactInput.value = previewArea.querySelector('p:nth-child(13)').textContent.split('：')[1];
        addressInput.value = previewArea.querySelector('p:nth-child(14)').textContent.split('：')[1];
    });
    // 保存按钮点击事件
    saveButton.addEventListener('click', function() {
        // 隐藏编辑区域，显示预览区域
        editArea.style.display = 'none';
        previewArea.style.display = 'block';

        // 将编辑区域的值赋给预览区域
        previewArea.querySelector('p:nth-child(1)').textContent = '姓名：' + nameInput.value;
        const gender = document.querySelector('input[name=gender]:checked').value;
        previewArea.querySelector('p:nth-child(2)').textContent = '性别：' + gender;
        previewArea.querySelector('p:nth-child(3)').textContent = '身份证号：' + idInput.value;
        previewArea.querySelector('p:nth-child(4)').textContent = '民族：' + nationInput.value;
        previewArea.querySelector('p:nth-child(5)').textContent = '生源地所属身份：' + provinceInput.value;
        previewArea.querySelector('p:nth-child(6)').textContent = '城市：' + cityInput.value;
        previewArea.querySelector('p:nth-child(7)').textContent = '入学学年：' + startYearInput.value;
        previewArea.querySelector('p:nth-child(8)').textContent = '毕业学年：' + endYearInput.value;
        previewArea.querySelector('p:nth-child(9)').textContent = '毕业学院：' + collegeSelect.value;
        previewArea.querySelector('p:nth-child(10)').textContent = '毕业专业：' + majorSelect.value;
        previewArea.querySelector('p:nth-child(11)').textContent = '学号：' + studentIdInput.value;
        previewArea.querySelector('p:nth-child(12)').textContent = '毕业学历：' + degreeInput.value;
        previewArea.querySelector('p:nth-child(13)').textContent = '联系方式：' + contactInput.value;
        previewArea.querySelector('p:nth-child(14)').textContent = '家庭住址：' + addressInput.value;
    });
</script>
</body>
</html>
<style>
    /* 容器样式 */
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 标题样式 */
    h1 {
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        color: #333;
        margin-bottom: 40px;
    }

    /* 表单样式 */
    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 40px;
    }

    /* 表单区域样式 */
    .form-area {
        width: 48%;
        margin-bottom: 20px;
    }

    /* 表单标题样式 */
    .form-area h2 {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }

    /* 表单项样式 */
    .form-item {
        margin-bottom: 16px;
    }

    /* 表单标签样式 */
    label {
        display: inline-block;
        width: 140px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-right: 20px;
        margin-bottom: 10px;
    }

    /* 表单输入框样式 */
    input[type=text], select, textarea {
        width: 60%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    /* 单选框样式 */
    input[type=radio] {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    /* 操作区域样式 */
    .action-area {
        text-align: center;
    }

    /* 操作按钮样式 */
    .button {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 10px;
    }

    /* 操作按钮悬停样式 */
    .button:hover {
        background-color: #3e8e41;
    }

    /* 预览区域样式 */
    .preview-area {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 20px;
        margin-bottom: 40px;
    }

    /* 预览区域标题样式 */
    .preview-area h2 {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }

    /* 预览区域段落样式 */
    .preview-area p {
        font-size: 18px;
        margin-bottom: 10px;
    }

</style>